<template>
  <div class="movie_cinema_box" >

    <headerBack ref="header" v-if="cinemaDetail" >{{cinemaDetail.nm}}</headerBack>

    <div class="movie_cinema_wrapper" v-if="cinemaDetail && cinemas" ref="cinema_wrapper">
        <movieInfo  :cinema-detail="cinemaDetail" ref="movieDetail"></movieInfo>
        <!-- 筛选 -->
        <tab-map :class="{tab_postition:tabMapPosition}" :style="{top:headerOffset +'px'}" :filter-cinemas="filterCinemas" :select-list="selectList" @change-position="changePosition" @hidden-position="hiddenPosition"   @change-brand="changeBrand"   @change-district="changeDistrict" @change-subway="changeSubway" @sumbit-btn="sumbitBtn"></tab-map>

        <movieShowDate :cinemas="cinemas" :cinema-detail="cinemaDetail"></movieShowDate>
    </div>
    <div>{{msg}}</div>
    <!-- </div> -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import getCinemaMovie from './getCinemaMovie.js'

import headerBack from '../header/headerBack'
import movieInfo from './movieInfo'

import tabMap from './tabmap/tabmap'

import movieShowDate from './movieShowDate'

export default {
  data () {
    return {
      cinemaDetail: [],
      cinemas: [],
      filterCinemas: [],
      selectList: {
        offset: 0,
        limit: 20,
        districtId: 71,
        lineId: -1,
        hallTypeId: -1,
        brandId: -1,
        serviceId: -1,
        areaId: -1,
        stationId: -1,
        areaId: 8547,
        updateShowDay: true
      },
      headerOffset: 0,
      tabMapPosition: false,
      msg: ''
    }
  },
  computed: {
    ...mapState(['currentCity'])
  },
  components: {
    movieInfo,
    movieShowDate,
    headerBack,
    tabMap
  },
  mounted () {
    this.headerOffset = this.$refs.header.$el.offsetHeight
    this.selectList['cityId'] = this.currentCity.id
    // 电影详情
    this.axios.get(`/ajax/detailmovie?movieId=${this.$route.query.movieID}`)
      .then(res => {
        this.cinemaDetail = res.data.detailMovie
      })

    this.axios.get('/ajax/tomyMovieId?channelId=4')
      .then(res => {
        // console.log(res)
      })

    // 筛选框数据
    this.getFilterCinemas()

    // 影院列表
    this.getCinemas()
    // 滚动事件
    let box = this.$refs.cinema_wrapper
    let info = this.$refs.movieDetail

    this.$refs.cinema_wrapper.onscroll = () => {
      if (box.scrollTop > info.$el.offsetHeight) {
        this.tabMapPosition = true
        this.headerOffset = this.$refs.header.$el.offsetHeight
      } else {
        this.headerOffset = 0
        this.tabMapPosition = false
      }
    }
  },
  methods: {
    // 筛选框位置
    changePosition () {
      this.tabMapPosition = true
      this.headerOffset = this.$refs.header.$el.offsetHeight
    },

    hiddenPosition () {
      this.tabMapPosition = false
      this.headerOffset = 0
    },

    // 切换电影院事件
    changeBrand (item) {
      this.selectList['brandId'] = item.id
      // ajax请求
      this.getCinemas()
      this.hiddenPosition()
    },

    // 行政区域事件
    changeDistrict (obj) {
      this.selectList['districtId'] = obj.district.id
      this.selectList['areaId'] = obj.area ? obj.area.id : -1
      // ajax请求
      this.getCinemas()
      this.hiddenPosition()
    },

    // 切换地铁事件
    changeSubway (obj) {
      this.selectList['subwayId'] = obj.subway.id
      this.selectList['stationId'] = obj.station ? obj.station.id : -1
      // ajax请求
      this.getCinemas()
      this.hiddenPosition()
    },

    hiddentap (e) {
      this.showIndex = 0
      this.mapActive = 0
    },
    // 服务筛选事件
    sumbitBtn (item) {
      for (var key in item) {
        this.selectList[key] = item[key]
      }
      // ajax请求
      this.getCinemas()
      this.hiddenPosition()
    },

    // 获取导航筛选数据  影院数据
    getCinemas () {
      this.isState = 1 // 加载中
      getCinemaMovie(this.selectList, this.currentCity, this.$route.query.movieID).then(res => {
        // 获取成功
        if (res.statusText === 'OK' && !res.data.code) {
          this.cinemas = res.data.cinemas
        }// 请求失败
        else if (res.data.code == 406) {
          console.log(res)
          this.msg = res.data.msg // 断网
        }
      }).catch(err => {
        this.isState = 2 // 断网
        console.log(err)
      })
    },
    // 获取筛选框数据
    getFilterCinemas () {
      let now = new Date()
      let year = now.getFullYear() // 年
      let month = now.getMonth() + 1 // 月
      let day = now.getDate() > 10 ? now.getDate() : '0' + now.getDate() // 日
      let formData = new FormData()

      this.axios.get(`/ajax/filterCinemas?movieId=${this.$route.query.movieID}&day=${year + '-' + month + '-' + day}`)
        .then(res => {
          console.log(res.data)
          this.filterCinemas = res.data
        })
    }

  }
}
</script>
<style  scoped>
  .movie_cinema_box{
    height: 100%;
    display: flex;flex-direction: column;
  }

  .movie_cinema_wrapper{
    height: 100%;
    overflow:auto;
  }

  .tab_postition{
    position: fixed;
    left: 0;
    right: 0;
  }
</style>
